<template>
  <div v-loading="pageLoading">
    <el-button-group>
      <el-button class="plain" disabled>
        编辑通知
        <i class="el-icon-edit" />
      </el-button>
      <el-button type="primary" @click="handleDelete">
        删除通知
        <i class="el-icon-delete" />
      </el-button>
    </el-button-group>
    <h3 class="notice-title">{{ noticeData && noticeData.title }}</h3>
    <el-descriptions v-loading="!noticeData" border :column="2">
      <el-descriptions-item label="通知类型">
        <el-tag>{{ noticeData && noticeData.type }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="发布时间">{{ noticeData && noticeData.sendTime }}</el-descriptions-item>
      <el-descriptions-item label="发布人">
        <UserFormItem :userid="noticeData && noticeData.from" />
      </el-descriptions-item>
    </el-descriptions>
    <div class="content-viewer">
      <NoticeViewer :content="noticeData && noticeData.content" />
      <div v-if="noticeData && noticeData.attachments" class="content-header">
        附件：{{ noticeData.attachments.length }}
        <li
          v-for="(file, index) in noticeData.attachments"
          :key="index"
          style="margin-left: 2rem;cursor: pointer;"
          @click="downloadUrl(JSON.parse(file).id)"
        >{{ JSON.parse(file).name }}</li>
      </div>
    </div>
  </div>
</template>
<script>
import { downloadUrl } from '@/api/common/static'
import { getDetails, remove } from '@/api/zzxt/notice'
export default {
  name: 'Viewer',
  components: {
    UserFormItem: () => import('@/components/User/UserFormItem'),
    NoticeViewer: () => import('@/components/MarkdownEditor/Viewer')
  },
  data: () => ({
    pageLoading: false,
    noticeData: null,
    dialogNotice: false
  }),
  mounted() {
    this.noticeId = this.$route.query.id
    this.getNoticeDetail()
  },
  methods: {
    downloadUrl,
    getNoticeDetail() {
      getDetails(this.noticeId).then(data => {
        this.noticeData = data.model
      })
    },
    handleDelete() {
      this.$confirm('确定要删除该通知吗？').then(_ => {
        this.pageLoading = true
        remove(this.noticeData).then(() => {
          this.$message.success('删除成功')
          this.$router.go(-1)
        })
      })
    }
  }
}
</script>
<style scoped>
.notice-title {
  font-weight: 500px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}
.content-viewer {
  border: 1px solid #ebebeb;
  border-radius: 3px;
  padding: 24px;
  margin-bottom: 3rem;
}
.content-header {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  font-style: italic;
  display: block;
  font-size: 14px;
  border-top: 1px solid #eaeefb;
  border-bottom: 1px solid #eaeefb;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  text-align: left;
  margin-top: 1rem;
  color: #d3dce6;
}
</style>
